import Vue from 'vue'
import App from './App.vue'
// 引入该组件
// @:src目录
import AboutUs from '@/views/AboutUs.vue'
import HotNews from '@/views/HotNews.vue'
// import ListView from '@/views/ListView.vue'
// import GoodsView from '@/views/GoodsView.vue'
import NotFound from '@/views/NotFound'
// 二级路由组件
import AddressView from '@/views/TwoRouter/AddressView'
import TelView from '@/views/TwoRouter/TelView'

Vue.config.productionTip = false

// 1. 下载vue-router模块到当前工程
// npm install vue-router@3
// 2. 在main.js中引入VueRouter函数
import VueRouter from 'vue-router';
// 3. 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
Vue.use(VueRouter);

// 多次点同一个路由出现错误及解决方案
const originalPush = VueRouter.prototype.push;
// 重写原型上的push方法，统一处理错误信息
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

// 4. 创建路由规则数组 – 路径和组件名对应关系
// const routes = [
//     // 重定向
//     { path: '/', redirect: '/aboutus' },
//     { path: '/aboutus', component: AboutUs },
//     { path: '/hotnews', component: HotNews },
//     { path: '/listview', component: ListView, name: 'listview' },
//     // 如果以restful进行接受参数,需要进行路由的匹配
//     { path: '/goodsview/:goodsId', component: GoodsView, name: 'goodsview' },
//     // 404页面
//     {
//         path: "*",
//         component: NotFound
//     }
// ];
// 嵌套路由
const routes = [
    // 重定向嵌套路由的写法
    { path: '/', redirect: '/aboutus/childaddress' },
    {
        path: '/aboutus',
        component: AboutUs,
        // 使用children的属性来匹配二级路由
        children: [{
            path: 'childaddress',
            component: AddressView
        }, {
            path: 'childTel',
            component: TelView
        }],
        // 路由独享的守卫
        // beforeEnter(){

        // }
    },
    { path: '/hotnews', component: HotNews },
    // 如果以restful进行接受参数,需要进行路由的匹配
    // 404页面
    {
        path: "*",
        component: NotFound
    }
];
// 5. 用规则生成路由对象
const router = new VueRouter({
    routes,
    // 修改路由的匹配模式为history,默认为hash
    mode: "history"
});
// 6. 把路由对象注入到new Vue实例中
// 路由全局前置守卫
// 根据登录状态来进行守卫
const isLogin = true;
router.beforeEach((to, from, next) => {
    // to:去哪里跳转到那个路由
    // from:从那个路由来
    // next:是否放行
    if (isLogin == false) {
        alert('请登录');
        // 不放行
        next(false)
    } else {
        // 放行:给与路由跳转
        next();
    }
});


new Vue({
    router,
    render: h => h(App),
}).$mount('#app')